<template>
    <div class="soilBox">
        <div class="sItem" v-for="(dt, index) in soilList" :key="dt.compositionId">
            <div class="title">
                <label>土壤检测日期</label>
                <p>{{dt.testDateTime}}</p>
            </div>
            <ul>
                <li>
                    <span class="txt">有机质(SOM）</span>
                    <span class="txt">{{dt.som.value}}(mg/kg)</span>
                    <span class="txt txt2" :style="`color:${dt.som.color}`">{{dt.som.detail}}</span>
                </li>
                <li>
                    <span class="txt">全氮(N)</span>
                    <span class="txt">{{dt.n.value}}(mg/kg)</span>
                    <span class="txt txt2" :style="`color:${dt.n.color}`">{{dt.n.detail}}</span>
                </li>
                <li>
                    <span class="txt">有效磷(P)</span>
                    <span class="txt">{{dt.p.value}}(mg/kg)</span>
                    <span class="txt txt2" :style="`color:${dt.p.color}`">{{dt.p.detail}}</span>
                </li>
                <li>
                    <span class="txt">速效钾(K)</span>
                    <span class="txt">{{dt.k.value || '--'}}(mg/kg)</span>
                    <span class="txt txt2" :style="`color:${dt.k.color}`">{{dt.k.detail}}</span>
                </li>
                <li>
                    <span class="txt">有效硅(Si)</span>
                    <span class="txt">{{dt.si.value}}(mg/kg)</span>
                    <span class="txt txt2" :style="`color:${dt.si.color}`">{{dt.si.detail}}</span>
                </li>
                <li>
                    <span class="txt">钙(Ca)</span>
                    <span class="txt">{{dt.ca.value}}(mg/kg)</span>
                    <span class="txt txt2" :style="`color:${dt.ca.color}`">{{dt.ca.detail}}</span>
                </li>
                <li>
                    <span class="txt">镁(Mg)</span>
                    <span class="txt">{{dt.mg.value}}(mg/kg)</span>
                    <span class="txt txt2" :style="`color:${dt.mg.color}`">{{dt.mg.detail}}</span>
                </li>
                <li>
                    <span class="txt">硫(S)</span>
                    <span class="txt">{{dt.s.value}}(mg/kg)</span>
                    <span class="txt txt2" :style="`color:${dt.s.color}`">{{dt.s.detail}}</span>
                </li>
                <li>
                    <span class="txt">铁(Fe)</span>
                    <span class="txt">{{dt.fe.value}}(mg/kg)</span>
                    <span class="txt txt2" :style="`color:${dt.fe.color}`">{{dt.fe.detail}}</span>
                </li>
                <li>
                    <span class="txt">硼(B)</span>
                    <span class="txt">{{dt.b.value}}(mg/kg)</span>
                    <span class="txt txt2" :style="`color:${dt.b.color}`">{{dt.b.detail}}</span>
                </li>
                <li>
                    <span class="txt">钼(Mo)</span>
                    <span class="txt">{{dt.mo.value}}(mg/kg)</span>
                    <span class="txt txt2" :style="`color:${dt.mo.color}`">{{dt.mo.detail}}</span>
                </li>
                <li>
                    <span class="txt">锌(Zn)</span>
                    <span class="txt">{{dt.zn.value}}(mg/kg)</span>
                    <span class="txt txt2" :style="`color:${dt.zn.color}`">{{dt.zn.detail}}</span>
                </li>
                <li>
                    <span class="txt">锰(Mn)</span>
                    <span class="txt">{{dt.mn.value}}(mg/kg)</span>
                    <span class="txt txt2" :style="`color:${dt.mn.color}`">{{dt.mn.detail}}</span>
                </li>
                <li>
                    <span class="txt">铜(Cu)</span>
                    <span class="txt">{{dt.cu.value}}(mg/kg)</span>
                    <span class="txt txt2" :style="`color:${dt.cu.color}`">{{dt.cu.detail}}</span>
                </li>
                <li>
                    <span class="txt">氯(Cl)</span>
                    <span class="txt">{{dt.cl.value}}(mg/kg)</span>
                    <span class="txt txt2" :style="`color:${dt.cl.color}`">{{dt.cl.detail}}</span>
                </li>
                <li>
                    <span class="txt">pH</span>
                    <span class="txt">{{dt.ph.value}}</span>
                    <span class="txt txt2" :style="`color:${dt.ph.color}`">{{dt.ph.detail}}</span>
                </li>
            </ul>
            <div class="itemDel"><el-icon @click="del(dt)" title="删除" :size="16"><Delete /></el-icon></div>
        </div>

        <!-- <div class="more">
            <span>点击加载更多</span>
        </div> -->
    </div>
</template>

<script setup>
import {ref,onMounted} from "vue"
import {getSoilNutrient,delComposition} from '@/api/plant'
import { ElMessageBox } from 'element-plus'
import {message} from '@/utils/element'
const props = defineProps({
    detail:{
        type:Object,
        default:{}
    }
})
const emit = defineEmits(['set'])
const soilList = ref('')
onMounted(()=>{
    getSoilNutrient(props.detail.farmLandId).then(res =>{
        soilList.value = res.data
    })
})
const del = (item)=>{
    ElMessageBox.confirm('确认删除土壤成分吗?','提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        const res = await delComposition([item.compositionId])
        if(res.code ==0 || res.success){
            message("删除成功",2)
            emit('set')
        }else{
            message(res.message,3)
        }
    })
  }
</script>

<style lang="scss" scoped>
    .soilBox{
        padding: 15px 0 0 0;
        
        .sItem{
            &+.sItem{
                margin-top: 15px;
            }
            .title{
                display: flex;
                align-items: center;
                height: 20px;
                font-size: 12px;
                margin: 0 0 5px 0;
                p{
                    flex: 1;
                    text-align: right;
                    font-size: 12px;
                }
            }
            ul{
                list-style: none;
                padding: 0;
                margin: 0;
                li{
                    display: flex;
                    height: 30px;
                    line-height: 30px;
                    align-items: center;
                    font-size: 12px;
                    border: 1px solid #eee;
                    &+li{
                        border-top: 0;
                    }
                    .txt{
                        flex: 1;
                        padding: 0 10px;
                        &+.txt{
                            border-left: 1px solid #eee;  
                        }
                        &.color1{
                            color: #cb3535;
                        }
                        &.color2{
                            color: #e8a411;
                        }
                        &.txt2{
                            flex:none;
                            width: 50px;
                        }
                    }
                }
            }
            .itemDel{
                display: flex;
                padding: 7px 0 10px 0;
                justify-content: end;
                i{
                    cursor: pointer;
                    &:hover{
                        color: #cb3535;
                    }
                }
            }
        }
        .more{
            display: flex;
            height: 30px;
            align-items: center;
            justify-content: center;
            span{
                font-size: 12px;
                color: #999;
                cursor: pointer;
                &:hover{
                    color: #747272;
                }
            }
        }
    }
</style>